<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>软件需求作业</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>

        html,body,#app{
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            overflow: hidden;
            background: #F0F0F0;
        }

        .el-container{
            height: 100%;
            width: 100%;
        }

        .el-header, .el-footer {
            background-color: #373d41;
            color: #333;
            text-align: center;
            line-height: 60px;
            padding: 0;
        }

        .el-aside {
            background-color: #373d41;
            text-align: center;
            color: white;
            /*line-height: 200px;*/
        }

        .el-main {
            /*background-color: #f36d4b;*/
            color: #333;
            overflow: hidden;
        }
        .el-menu{
            text-align: left;
        }
        #iframe{
            /*border: 1px red solid;*/
            height: 100%;
            width: 100%;
        }

    </style>
</head>
<body>

<div id="app">
    <el-container>
        <el-header>
            <el-container>
                <el-aside width="200px" style="text-align: left;padding: 0 20px">
                    软件需求管理系统
                </el-aside>
                <el-main style="padding: 0;color: white;text-align: right!important;">
                    <i class="el-icon-user" style="padding-right: 10px;">用户</i>
                    <i class="el-icon-switch-button" @click="logOut" style="padding-right: 10px;">退出</i>
                </el-main>
            </el-container>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu
                        class="el-menu-vertical-demo"
                        @open="handleOpen"
                        @close="handleClose"
                        background-color="#373d41"
                        text-color="#fff"
                        active-text-color="#ffd04b">
                    <el-menu-item th:if="${user.getUserrole()} eq  'SYSTEM' or ${user.getUserrole()} eq 'SALE' " index="1"
                                  @click="iframeSrc='/AccountManage/accountManage'">
                        <i class="el-icon-user-solid"></i>
                        <span>成员管理</span>
                    </el-menu-item>

                    <el-menu-item th:if="${user.getUserrole()} eq 'SYSTEM' or ${user.getUserrole()} eq 'SALE'" index="2"
                                  @click="iframeSrc='/ContractManage/contractManage'">
                        <i class="el-icon-s-cooperation"></i>
                        <span slot="title">合同管理</span>
                    </el-menu-item>
                    <el-menu-item th:if="${user.getUserrole()} eq 'SYSTEM' or ${user.getUserrole()} eq 'SALE'" index="3"
                                  @click="iframeSrc='/ContractManage/contractBuy'">
                        <i class="el-icon-s-order"></i>
                        <span slot="title">清单管理</span>
                    </el-menu-item>
                    <el-menu-item th:if="${user.getUserrole()} eq 'SYSTEM' or ${user.getUserrole()} eq 'SALE'" index="4"
                                  @click="iframeSrc='/CustomerManage/customerManage'">
                        <i class="el-icon-s-custom"></i>
                        <span>客户管理</span>
                    </el-menu-item>
                    <el-menu-item th:if="${user.getUserrole()} eq 'SYSTEM' or ${user.getUserrole()} eq 'SALE'" index="5"
                                  @click="iframeSrc='/Statistics/statistics'">
                        <i class="el-icon-s-data"></i>
                        <span>销售统计</span>
                    </el-menu-item>
                    <el-menu-item th:if="${user.getUserrole()} eq 'SYSTEM' or ${user.getUserrole()} eq 'REPOSITORY'" index="6"
                                  @click="iframeSrc='/WarehouseManage/warehouseManage'">
                        <i class="el-icon-s-goods"></i>
                        <span>仓库管理</span>
                    </el-menu-item>
                    <el-menu-item th:if="${user.getUserrole()} eq 'SYSTEM' or ${user.getUserrole()} eq 'STAFF'" index="7"
                                  @click="iframeSrc='/ContractManage/contractSearch'">
                        <i class="el-icon-s-claim"></i>
                        <span>我的合同</span>
                    </el-menu-item>
                    <el-menu-item th:if="${user.getUserrole()} eq 'SYSTEM' or ${user.getUserrole()} eq 'STAFF'" index="8"
                                  @click="iframeSrc='/Achievement/achievement'">
                        <i class="el-icon-s-marketing"></i>
                        <span>我的业绩</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-main style="padding: 0;">
                <iframe id="iframe" name="iframe" :src="iframeSrc" scrolling="no" frameborder="0"></iframe>
            </el-main>
        </el-container>
    </el-container>
</div>


<script>

    let app = new Vue({
        el: '#app',
        data (){
            return{
                iframeSrc: 'welcome',
            }

        },
        methods: {
            logOut()
            {
                axios.post('/logOut')
                    .then(function (res) {
                        let result = res.data ;
                        if (result === 'SUCCESS')
                        {
                            window.location.href ="/login";
                        }
                    });
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        }

    })
</script>
</body>
</html>